<script setup lang="ts">
import {ref, reactive} from "vue";
import type {Editor, EditorConfiguration} from "codemirror";
import Codemirror from "codemirror-editor-vue3";
// mode
import "codemirror/mode/javascript/javascript.js"

defineProps({
  code: {
    type: String,
    default: ''
  }
})

const cmOptions: EditorConfiguration = reactive({
  mode: "javascript",
  theme: "default",
  readOnly: true,
  lineNumbers: false,
  lineWiseCopyCut: false,
  lint: false,
});

const cminstance = ref<Editor | null>(null);
const onReady = (cm: Editor) => {
  cminstance.value = cm;
  // console.log(cm.getValue());
};
</script>

<template>
  <Codemirror
      :value="code"
      :options="cmOptions"
      height="100%"
      width="100%"
      class="cm-component"
      :border="true"
      @ready="onReady"
  />
</template>

<style scoped lang="scss">
.cm-component {
  font-family: monospace;
}
</style>